<template>
  <div class="product-detail-container">
    <el-card class="product-detail-card">
      <template #header>
        <div class="card-header">
          <span>商品详情</span>
          <el-button type="text" @click="goBack">返回商城</el-button>
        </div>
      </template>

      <div v-if="product" class="product-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <img :src="product.image" alt="Product Image" class="product-image-large" />
          </el-col>
          <el-col :span="12">
            <h2 class="product-name">{{ product.name }}</h2>
            <p class="product-description">{{ product.description }}</p>
            <p class="product-original-price" v-if="product.originalPrice !== product.discountedPrice">
              原价: <span class="price-strikethrough">¥{{ product.originalPrice }}</span>
            </p>
            <p class="product-discounted-price">
              折扣价: ¥{{ product.discountedPrice }}
              <el-tag v-if="product.discountRate > 0" type="success">{{ (product.discountRate * 100).toFixed(0) }}% 折扣</el-tag>
            </p>
            <div class="product-actions">
              <el-input-number v-model="quantity" :min="1" :max="10"></el-input-number>
              <el-button type="primary" @click="addToCart">加入购物车</el-button>
            </div>
            <p class="credit-info">您的信用分：{{ userCreditScore }}</p>
            <p class="credit-tip">信用分越高，折扣越大！</p>
          </el-col>
        </el-row>
      </div>
      <div v-else class="no-product-found">
        <p>未找到该商品。</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const product = ref(null)
const quantity = ref(1)
const userCreditScore = ref(655); // 假设用户信用分，与 ShoppingList 保持一致

const productsData = [
  {
    id: 1,
    name: '智能手表',
    description: '这款智能手表功能强大，是您健康生活的理想伴侣。具备心率监测、睡眠追踪、运动模式识别等功能。',
    image: 'https://via.placeholder.com/400x300?text=Smart+Watch',
    originalPrice: 198,
  },
  {
    id: 2,
    name: '木质笔筒',
    description: '简约而不简单的木质笔筒，让您的桌面整洁有序。采用天然环保木材制作，手感温润。',
    image: 'https://via.placeholder.com/400x300?text=Wood+Pen+Holder',
    originalPrice: 198,
  },
  {
    id: 3,
    name: '环保袋',
    description: '时尚环保袋，可重复使用，为地球环保出一份力。大容量设计，购物出行必备。',
    image: 'https://via.placeholder.com/400x300?text=Eco+Bag',
    originalPrice: 198,
  },
  {
    id: 4,
    name: '桌面植物',
    description: '为您的办公桌或居家空间增添一抹绿色。无需频繁打理，轻松享受大自然的气息。',
    image: 'https://via.placeholder.com/400x300?text=Table+Plant',
    originalPrice: 198,
  }
];

const calculateDiscountedPrice = (originalPrice, creditScore) => {
  let discountRate = 0;
  if (creditScore >= 700) {
    discountRate = 0.3; // 30% off for excellent credit
  } else if (creditScore >= 600) {
    discountRate = 0.2; // 20% off for good credit
  } else if (creditScore >= 500) {
    discountRate = 0.1; // 10% off for average credit
  }
  const discountedPrice = (originalPrice * (1 - discountRate)).toFixed(2);
  return { discountedPrice, discountRate };
};

onMounted(() => {
  const productId = parseInt(route.params.id);
  const foundProduct = productsData.find(p => p.id === productId);
  if (foundProduct) {
    const { discountedPrice, discountRate } = calculateDiscountedPrice(foundProduct.originalPrice, userCreditScore.value);
    product.value = { ...foundProduct, discountedPrice, discountRate };
  }
});

const goBack = () => {
  router.back();
};

const addToCart = () => {
  if (product.value) {
    ElMessage.success(`已将 ${quantity.value} 件 ${product.value.name} 加入购物车！`);
    // 这里可以添加实际的购物车逻辑，例如调用API、更新全局状态等
  } else {
    ElMessage.error('无法加入购物车，商品信息缺失。');
  }
};
</script>

<style scoped>
.product-detail-container {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: calc(100vh - 60px); /* Adjust based on header height */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.product-detail-card {
  width: 90%;
  max-width: 1200px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.product-content {
  padding: 20px;
}

.product-image-large {
  width: 100%;
  height: auto;
  max-height: 400px; /* Limit image height */
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 20px;
}

.product-name {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.product-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.product-original-price {
  font-size: 16px;
  color: #999;
  margin-bottom: 5px;
}

.price-strikethrough {
  text-decoration: line-through;
}

.product-discounted-price {
  font-size: 24px;
  font-weight: bold;
  color: #dc3545;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.product-discounted-price .el-tag {
  margin-left: 10px;
}

.product-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.credit-info,
.credit-tip {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.credit-tip {
  color: #409EFF;
  font-weight: bold;
}

.no-product-found {
  text-align: center;
  padding: 50px;
  color: #909399;
 